<template>
  <div class="production-plan">
    <el-button type="success" @click="addjihau" class="save-button">保存主表单和明细</el-button>
    <h3 class="title">完工入库表</h3>

    <!-- 基本信息 -->
    <el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="120px" class="form-container">
      <el-row :gutter="30">
        <!-- 第一行 -->
        <el-col :span="8">
          <el-form-item label="工厂">
            <el-input 
              placeholder="请输入" 
              v-model="formData.factory" 
              required
            >
              <template #suffix>
                <el-button size="mini" @click="openAssociatedItemDialog">
                  <i class="el-icon-search"></i>
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工单号" style="margin-bottom: 20px;">
            <el-input v-model="formData.workOrderNo" placeholder="请输入编号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="工单类型" style="margin-bottom: 20px;">
              <el-select
                v-model="formData.workoOderType"
                placeholder="请选择工单类型"
                style="width: 100%;"
                :filterable="true"
                :clearable="true"
              >
                <el-option
                  v-for="item in workOrderTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        <!-- 第二行 -->
        <el-col :span="8">
          <el-form-item label="成品产品批次号" style="margin-bottom: 20px;">
            <el-input v-model="formData.finishedProductBatch" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="事务起始时间" prop="transactionTime" style="margin-bottom: 20px;">
            <el-date-picker
              v-model="formData.transactionTime"
              type="date"
              required
              placeholder="请选择事务起始时间"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="事务结束时间" prop="transactionEndTime" style="margin-bottom: 20px;">
            <el-date-picker
              v-model="formData.transactionEndTime"
              type="date"
              required
              placeholder="请选择事务结束时间"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 第三行 -->
        <el-col :span="8">
          <el-form-item label="产线" style="margin-bottom: 20px;">
            <el-input v-model="formData.productionLine" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="班组" style="margin-bottom: 20px;">
            <el-input v-model="formData.team" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="班次" style="margin-bottom: 20px;">
            <el-input v-model="formData.shift" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <!-- 第四行 -->
        <el-col :span="8">
          <el-form-item label="物料编码" style="margin-bottom: 20px;">
            <el-input v-model="formData.materialCode" placeholder="请填写" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料编号说明" style="margin-bottom: 20px;">
            <el-input v-model="formData.materialDescription" placeholder="请填写" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="库存" style="margin-bottom: 20px;">
              <el-select
                v-model="formData.inventory"
                placeholder="请选择库存"
                style="width: 100%;"
                :filterable="true"
                :clearable="true"
              >
                <el-option
                  v-for="item in workOrderTypeOptions2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        <!-- 第五行 -->

        <el-col :span="8">
            <el-form-item label="货位" style="margin-bottom: 20px;">
              <el-select
                v-model="formData.freight"
                placeholder="请选择货位"
                style="width: 100%;"
                :filterable="true"
                :clearable="true"
              >
                <el-option
                  v-for="item in workOrderTypeOptions3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        <el-col :span="8">
          <el-form-item label="计划完工数量" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.plannedCompletions" placeholder="请输入数量" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入出类型" style="margin-bottom: 20px;">
            <el-input v-model="formData.accessType" placeholder="请填写" />
          </el-form-item>
        </el-col>
        <!-- 第六行 -->
        <el-col :span="8">
            <el-form-item label="单位" style="margin-bottom: 20px;">
              <el-select
                v-model="formData.unit"
                placeholder="请选择货位"
                style="width: 100%;"
                :filterable="true"
                :clearable="true"
              >
                <el-option
                  v-for="item in workOrderTypeOptions4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        <el-col :span="8">
          <el-form-item label="实际入库数量" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.inboundQuantity" placeholder="请输入数量" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="千升酒量" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.drinker" placeholder="请输入数量" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <!-- 第七行 -->
        <el-col :span="8">
          <el-form-item label="ERP工单" style="margin-bottom: 20px;">
            <el-input v-model="formData.erpTickets" placeholder="请填写" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="票号" style="margin-bottom: 20px;">
            <el-input v-model="formData.ticketNumber" placeholder="请填写" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="操作人" style="margin-bottom: 20px;">
            <el-input v-model="formData.operator" placeholder="请填写" disabled />
          </el-form-item>
        </el-col>
        <!-- 第八行 -->
        <el-col :span="12">
          <el-form-item label="业务时间" prop="businseeTime" style="margin-bottom: 20px;">
            <el-date-picker
              v-model="formData.businseeTime"
              type="date"
              required
              placeholder="请选择业务时间"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="操作时间" prop="operatingTime" style="margin-bottom: 20px;">
            <el-date-picker
              v-model="formData.operatingTime"
              type="date"
              required
              placeholder="请选择操作时间"
              disabled
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>


     <!--工厂选择对话框 -->
    <el-dialog
      v-model="associatedItemDialogVisible"
      width="500px"
      title="关联项目选择"
      append-to-body
    >
      <el-table
        :data="associatedItems"
        highlight-current-row
        border
        size="small"
        @current-change="handleAssociatedItemChange"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column property="teamNumber" label="业务单号" />
        <el-table-column property="factory" label="工厂" />
        <el-table-column property="workshop" label="车间" />
        <el-table-column property="department" label="部门" />
        <el-table-column type="productionLine" label="产线" />
        <el-table-column property="teams" label="班组" />
        <el-table-column property="shift" label="班次" />
        <el-table-column property="state" label="状态" />
        <el-table-column property="date" label="日期" />
        <el-table-column type="recorders" label="记录人" />
        <el-table-column property="shiftleader" label="交班班长" />
        <el-table-column property="successionMonitor" label="接班班长" />
      </el-table>
      <template #footer>
        <el-button @click="pickAssociatedItem">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { Materialread, Materialwrite } from '@/axios/axiosHelper';
import axios from 'axios';
import { th } from 'element-plus/es/locales.mjs';

const formRef = ref(null);
const currentUser = ref("admin");
const router = useRouter();
const route = useRoute();

// 主表单数据
const formData = reactive({
  id: route.params.id,
"factory": "",
"workOrderNo": "",
"workoOderType": "",
"finishedProductBatch": "",
"transactionTime": "",
"transactionEndTime": "",
"productionLine": "",
"team": "",
"shift": "",
"materialCode": "",
"materialDescription": "",
"inventory": "",
"freight": "",
"plannedCompletions": '',
"accessType": "",
"unit": "",
"inboundQuantity": '',
"drinker": '',
"erpTickets": "",
"ticketNumber": "",
"operator": currentUser.value,
"businseeTime": "",
"operatingTime": new Date().toISOString(),
"isDel": true

});

// 主表单验证规则
const rules = reactive({
  bomSubject: [
    { required: true, message: '不能为空', trigger: 'blur' }
  ],
  productName: [
    { required: true, message: '不能为空', trigger: 'blur' }
  ],
  documentNo: [
    { required: true, message: '不能为空', trigger: 'blur' }
  ],
});



const getProductionById = (id) => {
console.log('查看反填数据:', id);
Materialread.get('p-read/api/CompletedStorage/FTCompletedStorage', {
    params:{
      id: route.query.id
    }
  })
  .then(res=>{
    formData.id = res.data.data[0].id;
    formData.factory = res.data.data[0].factory;
    formData.workOrderNo = res.data.data[0].workOrderNo;
    formData.workoOderType = res.data.data[0].workoOderType;
    formData.finishedProductBatch = res.data.data[0].finishedProductBatch;
    formData.transactionTime = res.data.data[0].transactionTime;
    formData.transactionEndTime = res.data.data[0].transactionEndTime;
    formData.productionLine = res.data.data[0].productionLine;
    formData.team = res.data.data[0].team;
    formData.shift = res.data.data[0].shift;
    formData.materialCode = res.data.data[0].materialCode;
    formData.materialDescription = res.data.data[0].materialDescription;
    formData.inventory = res.data.data[0].inventory;
    formData.freight = res.data.data[0].freight;
    formData.plannedCompletions = res.data.data[0].plannedCompletions;
    formData.accessType = res.data.data[0].accessType;
    formData.unit = res.data.data[0].unit;
    formData.inboundQuantity = res.data.data[0].inboundQuantity;
    formData.drinker = res.data.data[0].drinker; 
    formData.erpTickets = res.data.data[0].erpTickets;
    formData.ticketNumber = res.data.data[0].ticketNumber;
    formData.operator = res.data.data[0].operator;
    formData.businseeTime = res.data.data[0].businseeTime;
    formData.operatingTime = res.data.data[0].operatingTime;
    formData.modelValue = res.data.data[0];
    console.log('完工入库反填数据:', res.data);
  })
};

// 明细数据列表
const planDetailsList = ref([]);
const attachments = ref([]);

// // 保存主表单
 const addjihau = () => {
  Materialwrite.post('p-write/api/CompletedStorage/UpdateCompletedStorage', formData)
    .then(response => {
     if (response.data.code === 200) {
       ElMessage.success('完工入库修改成功');
       console.log(response.data.data);
       router.push("/GETCompletedStorage");
    } else {
       ElMessage.error(`完工入库修改失败：${response.data.message}`);
    }
    })
};

onMounted(()=>{
  getProductionById();
})


//
const workOrderTypeOptions = ref([
  { value: '包装工单', label: '包装工单' },
  { value: '物料工单', label: '物料工单' },
  { value: '能源工单', label: '能源工单' },
  { value: '过滤工单', label: '过滤工单' },
  { value: '糖化工单', label: '糖化工单' },
  { value: '发酵工单', label: '发酵工单' },
  { value: '酵母工单', label: '酵母工单' },
]);
//库存
const workOrderTypeOptions2 = ref([
  { value: 'BZ01', label: 'BZ01' },
  { value: 'ZZ01', label: 'ZZ01' },
  { value: 'LX01', label: 'LX01' },
  { value: 'GL03', label: 'GL03' },
  { value: 'TG02', label: 'TG02' }
]);
//货位
const workOrderTypeOptions3 = ref([
  { value: 'BZ2', label: 'BZ2' },
  { value: 'SZ03', label: 'SZ03' },
  { value: 'ZZG05', label: 'ZZG05' },
  { value: 'GLL03', label: 'GLL03' },
  { value: 'LXN01', label: 'LXN01' }
]);
//单位
const workOrderTypeOptions4 = ref([
  { value: '升', label: '升' },
  { value: '毫升', label: '毫升' },
  { value: '千升', label: '千升' },
  { value: '吨', label: '吨' },
  { value: '千克', label: '千克' },
  { value: '克', label: '克' },
  { value: '瓶', label: '瓶' },
  { value: '罐', label: '罐' },
  { value: '袋', label: '袋' },
  { value: '盒', label: '盒' },
  { value: '箱', label: '箱' },
  { value: '个', label: '个' },
  { value: '件', label: '件' },
  { value: '桶', label: '桶' },
]);

// 对话框显示状态
const associatedItemDialogVisible = ref(false);
const currentAssociatedItem = ref({});
// 关联项目数据
const associatedItems = ref([]);
// 打开关联项目选择对话框
const openAssociatedItemDialog = () => {
  associatedItemDialogVisible.value = true;
};
// 当前选中的关联项目行
const handleAssociatedItemChange = (val) => {
  currentAssociatedItem.value = val;
};
// 选择关联项目
const pickAssociatedItem = () => {
  if (currentAssociatedItem.value) {
    formData.factory = currentAssociatedItem.value.factory; // 工厂

    formData.productionLine = currentAssociatedItem.value.productionLine; // 产线
    formData.team = currentAssociatedItem.value.teams; // 班组
    formData.shift = currentAssociatedItem.value.shift; // 班次

    associatedItemDialogVisible.value = false;
  }
};
// 获取关联项目数据
const fetchAssociatedProjects = () => {
  axios.get("http://localhost:5118/api/Team/ShowTeam")
    .then(res => {
      associatedItems.value = res.data.data;

    })
};


onMounted(() => {
fetchAssociatedProjects();

});

</script>

<style scoped>
.production-plan {
  padding: 30px;
  background-color: #f0f2f5;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}

.title {
  text-align: center;
  margin-bottom: 30px;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.save-button {
  display: block;
  margin: 0 auto 30px;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;
}

.form-container {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.el-form-item__label {
  color: #34495e;
  font-size: 16px;
  font-weight: 500;
}

.el-input,
.el-input-number,
.el-date-picker {
  border-radius: 6px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 14px;
}

.el-input:focus,
.el-input-number:focus,
.el-date-picker:focus {
  border-color: #42b983;
  outline: none;
  box-shadow: 0 0 5px rgba(66, 185, 131, 0.2);
}

</style>